<template>
	<div class="common-layout">
	
	    <el-container>
			<el-header><Header></Header></el-header>
			<el-main>
				<div v-if="show==2">
				<el-menu  
				ellipsis
				    :default-active="activeIndex"
				    class="el-menu-demo"
				    mode="horizontal"
					style="margin-bottom: 10px;"
				  >
					<el-menu-item index="1" @click="trader">分销商</el-menu-item>
					<el-menu-item index="2" @click="traderapply">分销商申请</el-menu-item>
				</el-menu>
				
				
				<Trader v-if="flag" @update-message="handleMessageUpdate" ref="detailmessage"></Trader>
				<TraderApply v-else></TraderApply>
				
				
				</div>
				<div v-else-if="show==0">
					<!-- <h2>
						<el-button @click="goback" style="margin: 20px 20px;">返回</el-button>分销详情</h2>
					<h3>基础信息</h3> -->
					<div style="display: flex;align-items: center;margin-bottom: 20px;">
						<span style="margin-right: 10px;cursor: pointer;display: flex;align-items: center;" @click="back">
							<el-icon><ArrowLeft /></el-icon>
							<span @click="goback">返回</span>
							<span style="margin-left: 10px;">|</span>
						</span>
						<h3 style="margin-bottom: 0px;">分销商详情</h3>
					</div>
					<div class="item">
						<div><p>头像</p><img src="../../public/头像.png"/></div>
						<div><p>昵称</p><p ref="userName">{{message.baseInfo.userName}}</p></div>
						<div><p>手机号</p><p ref="tel">{{message.baseInfo.tel}}</p></div>
					</div>
					<div class="item">
						<div><p>分销编码编码</p><p ref="distributorCode">{{message.baseInfo.distributorCode}}</p></div>
						<div>
							<p>分销等级</p><p>{{message.baseInfo.distributorLevelName}}</p>
							<el-icon style="margin-left: 10px;"><EditPen @click="updatelevel(row)" /></el-icon>
						</div>
						<div>
							<p>上级分销商</p><p>{{message.baseInfo.superior}}</p>
							<el-icon style="margin-left: 10px;"><EditPen @click="updatersuperior(row)"/></el-icon>
						</div>
					</div>
					
					<!-- 修改分销等级 -->
					<el-dialog v-model="dialogFormVisible1" title="变更分销商等级" width="500">
					    <el-form>
					      <el-form-item label="分销商等级">
					        <el-select v-model="dleveloptionvalue" style="width: 200px;">
					         <el-option
					           v-for="item in dleveloption"
					           :key="item.distributionLevelId"
					           :label="item.levelName"
					           :value="item.distributionLevelId"
					         />
					        </el-select>
							<el-button plain @click="reload"  style="margin-left: 10px;">刷新</el-button>
							<el-button type="primary" @click="goaddlevel">添加等级</el-button>
					      </el-form-item>
						
					    </el-form>
					    <template #footer>
					      <div class="dialog-footer">
					        <el-button @click="dialogFormVisible1 = false">取消</el-button>
					        <el-button type="primary" @click="sure1">
					          确定
					        </el-button>
					      </div>
					    </template>
					  </el-dialog>
					
					<!-- 变更上级分销商 -->
					<el-dialog v-model="dialogFormVisible2" title="变更上级分销商" width="800">
					    <el-form>
					      <el-form-item label="分销商信息">
							<el-input placeholder="请输入分销昵称" style="width:220px ;" v-model="superinfo"></el-input>
							<el-button @click="searchsuperior">搜索</el-button>
							<el-button type="primary" @click="superreset">重置</el-button>
					      </el-form-item>
						  <el-table :data="traderTable" style="width: 100%">
						  	<el-table-column prop="userName" label="分销商信息" width="160" />
						  	<el-table-column prop="distributionLevelId" label="分销商等级" width="160" />
							<el-table-column prop="distributiorStatus" label="当前状态" width="160" />
							<el-table-column  label="操作">
						  		<template #default="{row}">
						  			<el-button @click="makechange(row)">选择</el-button>
						  		</template>
						  	</el-table-column>
						  </el-table>
						  
					    </el-form>
					  </el-dialog>
					
					<el-dialog v-model="dialogFormVisible3" title="提示" width="500">
					    <el-form>
							<p style="text-align: center;">确认要变更上级分销商吗?</p>
					    </el-form>
						<template #footer>
						  <div class="dialog-footer">
						    <el-button @click="dialogFormVisible3 = false">取消</el-button>
						    <el-button type="primary" @click="makesuer">
						      确定
						    </el-button>
						  </div>
						</template>
					  </el-dialog>
					
					<h3>账户统计</h3>
					<div class="part">
						<div class="item">
							<div><p>可提现佣金</p><p ref="canBe">{{message.accountStat.canBe}}</p></div>
							<div><p>累计佣金</p><p ref="totalDistribution">{{message.accountStat.totalDistribution}}</p></div>
							<div><p>提现中</p><p ref=""></p></div>
							
						</div>
						<div class="item">
							<div><p>分销佣金</p><p ref="distributionMoney">{{message.accountStat.distributionMoney}}</p></div>
							<div><p>渠道代理</p><p ref="proxyMoney">{{ message.accountStat.proxyMoney}}</p></div>
							<div><p>分销奖励</p><p ref="saleReward">{{message.accountStat.saleReward}}</p></div>
						</div>
						<div class="item">
							<div><p>团队分红</p><p ref=""></p></div>
							<div><p>任务奖励</p><p ref=""></p></div>
						</div>
					</div>
					<el-menu
					ellipsis
					    :default-active="activeIndex"
					    class="el-menu-demo"
					    mode="horizontal"
						style="margin-bottom: 10px;"
					  >
						<el-menu-item index="1" @click="getrefundAccount">佣金账户</el-menu-item>
						<el-menu-item index="2" @click="gettemInfo">团队信息</el-menu-item>
					</el-menu>
					
					
					<el-table :data="refundlist.list" style="width: 100%;display: flex;" v-if="tableflag" >
						<el-table-column fixed label="变动金额" style="width: 30%;">
							<template #default="{ row }">
								{{row.moneyChange}}
							</template>
						</el-table-column>
						<el-table-column label="账户来源" style="width: 30%;" >
							<template #default="{ row }">
								{{row.moneySourceId}}
							</template>
						</el-table-column>
						<el-table-column label="账户余额" style="width: 30%;" >
							<template #default="{ row }">
								{{row.moneyFinal}}
							</template>
						</el-table-column>
						<el-table-column label="创建时间" style="width: 30%;" >
							<template #default="{ row }">
								{{row.createTime}}
							</template>
						</el-table-column>
						<el-table-column label="备注" style="width: 30%;">
							null
						</el-table-column>
					</el-table>
					
					<el-table :data="tableData" style="width: 100%;display: flex;" v-else>
						<el-table-column label="账户信息" style="width: 30%;">
							<template #default="{ row }">
								{{row.userName}}
							</template>
						</el-table-column>
						<el-table-column label="是否是分销商" style="width: 30%;" >
							<template #default="{ row }">
								{{row.isDistributor}}
							</template>
						</el-table-column>
						<el-table-column label="类型" style="width: 30%;" >
							<template #default="{ row }">
								直推
							</template>
						</el-table-column>
						<el-table-column label="加入时间" style="width: 30%;" >
							<template #default="{ row }">
								{{row.createTime}}
							</template>
						</el-table-column>

					</el-table>
					
					
					<!-- <el-pagination
						layout="prev,pager,next"
						:page-count="total"
						:page-size="pageSize"
						v-model:current-page="pageIndex"	
						@current-change="changePage"
					></el-pagination> -->
				</div>
				<Addtarder v-else @changshow="changeShow"></Addtarder>
			</el-main>
	    </el-container>
		
	</div>
</template>

<script setup>
import { ref,onMounted,reactive} from "vue" 
import Header from "@/components/Header.vue"
import Trader from "./trader.vue"
import TraderApply from "./traderapply.vue"
import Addtarder from "./Addtarder.vue"
import { EditPen,ArrowLeft } from '@element-plus/icons-vue'
import {
	traderdetail,
	refundAccount,
	teamDetail,
	updateTraderLevel,
	getTraderLevel,
	updatasuper,
	supertradersearch,
	updatasuperTrader
	} from "@/api"
import { number } from "echarts"
import { useRoute, useRouter } from "vue-router"
import { ElMessage } from "element-plus"

let router=useRouter()
let route=useRoute()
const activeIndex = ref('1')
let pageIndex=ref(1);
let pageSize=10;
let total=ref(0)
const tableData = ref([])
let message=reactive({})
let refundlist=reactive({})
let show=ref(2)
const changeShow=()=>{
	show.value=2
	// console.log(show.value);
}

function handleMessageUpdate (newMessage,newrefund,toshow){
	message = newMessage;
	refundlist = newrefund;
	total.value=refundlist.pageCount;
	show.value=toshow.value;
	// console.log("refundlist",refundlist);
	// console.log("mess",message.value);
}
//
const traderDellevel=ref()
const supertrader=ref()
const traderDeL=async ()=>{
	let res=await traderdetail({
		pageIndex:pageIndex.value,
		pageSize:pageSize,
		"distributorId":Number(sessionStorage.getItem("distributorId")),
	})
	traderDellevel.value=res.baseInfo.distributorLevel
	supertrader.value=res.baseInfo.superior
	// console.log("分销商详情222222",res)

}


const flag=ref(true)
const trader=()=>{
	flag.value=true
}
const traderapply=()=>{
	flag.value=false
}
const tableflag=ref(true)
//佣金账户和团队信息tabl切换
const getrefundAccount=async ()=>{
	let res=await refundAccount({
		pageIndex:pageIndex.value,
		pageSize:pageSize,
		"distributorId":Number(sessionStorage.getItem("distributorId")),
	})
	// console.log("佣金账户列表",res)
	refundlist=res
	total.value=refundlist.pageCount
	tableflag.value=true
}
//团队信息
const gettemInfo=async ()=>{
	tableflag.value=false
	let res=await teamDetail({
		pageIndex:pageIndex.value,
		pageSize:pageSize,
		"distributorId":Number(sessionStorage.getItem("distributorId")),
	})
	// console.log("团队信息",res)
	tableData.value=res.list
	total.value=res.pageCount
}

const dialogFormVisible1=ref(false)
const dialogFormVisible2=ref(false)
const dialogFormVisible3=ref(false)
const traderInfo=ref()
const traderlevel=ref()
const dleveloption=ref([])
const dleveloptionvalue=ref()
//获取分校商等级
const gettraderlevel = async ()=>{
	let res=await getTraderLevel({
		pageIndex:pageIndex.value,
		pageSize:pageSize,
		siteId:Number(sessionStorage.getItem("siteId")),
	})
	// console.log("分销等级",res)
	dleveloption.value=res.list
	// tableData.value=res.list
	// total.value=res.pageCount
}
//修改分销商等级
const updatelevel = async ()=>{
	dialogFormVisible1.value=true;
	dleveloptionvalue.value=Number(message.value.baseInfo.distributorLevelId)
}

//点击修改对话框确认
const sure1=async ()=>{
	let data=reactive({
		"distributorId":Number(sessionStorage.getItem("distributorId")),
		"distributionLevelId": Number(dleveloptionvalue.value),
	})
	// console.log(data);
	let res=await updateTraderLevel(data)
	if(typeof(res)=="object"){
		ElMessage({
			message:"修改成功",
			type:"success"
		})
	}
	dialogFormVisible1.value=false;
	let resx=await traderdetail({
		pageIndex:pageIndex.value,
		pageSize:pageSize,
		"distributorId":sessionStorage.getItem("distributorId"),
	})
	// console.log("qwwerwrwrw",resx);
	message.value.baseInfo.distributorLevelName=resx.baseInfo.distributorLevelName
	traderDeL()
}
//刷新
const reload=()=>{
	window.location.reload()
}
const goaddlevel=()=>{
	// console.log(123);
	router.push('/hidedistribute/hidedistributemanage/hidedistributelevel')
}
//可选上级分销商列表
const traderTable=ref([])
const updatersuperior = async (row)=>{
	dialogFormVisible2.value=true
	// console.log();
	let res=await updatasuper({
		distributorId: sessionStorage.getItem("distributorId"),
		pageIndex:pageIndex.value,
		pageSize:pageSize,
		siteId:Number(sessionStorage.getItem("siteId")),
	})
	traderTable.value=res.list
	// console.log("可选上级分销商",res)
}
//搜索可选上级分销
const superinfo=ref()
const searchsuperior = async ()=>{
	let res=await supertradersearch({
		"info": superinfo.value,
		"pageIndex":pageIndex.value,
		"pageSize":pageSize,
		siteId:Number(sessionStorage.getItem("siteId")),
	})
	traderTable.value=res.list
	// console.log("搜索到的可选上级分销商",res)
}
//重置
const superreset=async ()=>{
	superinfo.value='';
	let res=await supertradersearch({
		"info": superinfo.value,
		"pageIndex":pageIndex.value,
		"pageSize":pageSize,
		siteId:Number(sessionStorage.getItem("siteId")),
	})
	traderTable.value=res.list
}

//点击变更
const makechange=(row)=>{
	sessionStorage.setItem("superuserId",row.userId)
	// console.log("111111111",row);
	sessionStorage.setItem("supername",row.userName)
	
	dialogFormVisible2.value=false
	dialogFormVisible3.value=true
}

//点击变更的确认updatasuperTrader
const makesuer=async ()=>{
	let res=await updatasuperTrader({
		"distributorId":Number(sessionStorage.getItem("nowuserId")),
		"distributiorSuperior":Number(sessionStorage.getItem("superuserId")),
	})
	// console.log("已修改选定",res)
	if(typeof(res)=="object"){
		ElMessage({
			message:"修改成功",
			type:"success"
		})
	}
	// trderList()
	// message.baseInfo.superior
	dialogFormVisible3.value=false
	message.value.baseInfo.superior=sessionStorage.getItem("supername")
	// message.value.baseInfo.distributorLevel
}

//点击返回
const goback=()=>{
	show.value=2
}

//分页
// const changePage=(page)=>{
// 	pageIndex.value=page;
// 	getrefundAccount()
// }
onMounted(()=>{
	// getTraderdetail()
	// getrefundAccount()
	gettraderlevel()
	// traderDeL()
})

</script>

<style scoped lang="less">
	:deep(.el-table .el-table__cell){
	    text-align: center !important;
	}
	.common-layout{
		background: #f2f3f5;
		.el-header{
			padding:0 !important;
			height: 10vh;
		}
		.el-main{
			height: 86vh;
			// padding:0;
			width: 98%;
			background: #fff;
			margin: 10px auto;
		}
	}
	.item1{
			margin-top: 30px;
			display: flex;
			flex-wrap: wrap;
		}
		.el-form-item__content{
			width: 200px;
		}
		.el-menu-item {
			padding: 0 10px !important; /* 设置左右padding为20px */
		}
		.el-menu-item.is-active{
			background-color: #fff;
		}
		:deep(.el-table .cell .goodsDetail){
			display: flex !important;
		}
	.part{
		font-size: 12px;
	}
	.item{
		margin-left: 100px;
		display: flex;
		div{
			margin-top: 15px;
			margin-bottom: 15px;
			width: 30%;
			display: flex;
			align-items: center;
			P{
				margin-left: 10px;
			}
		}
	}	
	h3{
		// margin-left: 50px;
		margin-bottom: 20px;
		// margin-top: 20px;
		display: flex;
		// margin-right: 100px;
	}
	img{
		width: 50px;
	}
</style>